<template>
  <div class="CustomerService">
    <div class="filter_containerser">
      <el-form :inline="true" :model="Serviceform" class="demo-form-inline">
        <!-- <el-form-item label="下单日期:">
          <el-date-picker v-model="Serviceform.startTime" size="small" type="date" style='width: 150px;margin-right: 15px;'
            placeholder="选择开始日期"></el-date-picker>
          <el-date-picker v-model="Serviceform.endTime" size="small" type="date" style='width: 150px;margin-right: 15px;'
            placeholder="选择结束日期"></el-date-picker>
        </el-form-item> -->
        <el-form-item label="下单日期">
          <el-date-picker size="small" v-model="Launchdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            :clearable='false' end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客服名称:">
          <el-input v-model.trim="Serviceform.account" size="small" placeholder="请输入客服名称" clearable @keyup.enter.native='handleFilter(Launchdate)'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilter(Launchdate)">查询</el-button>
          <el-button type="success" plain size="small"  icon="el-icon-download" @click="handleExport(Serviceform,Launchdate)"  onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tablelistService">
      <table>
        <thead>
          <tr>
            <th>属于组别</th>
            <th>姓名</th>
            <th>订单总数量</th>
            <th>当日配送数量</th>
            <th>预订单数量</th>
            <th>已退订数量</th>
          </tr>
        </thead>
        <tbody v-for="(item, index) in CustomerServiceList" :key='index' v-if='CustomerServiceList&&CustomerServiceList.length'>
          <tr>
            <td class='groupName'>{{item.groupName}}</td>
            <td class='remterstauts' v-if="item.list&&item.list.length>0">
          <tr style="border: none;" v-for="(child, index2) in item.list" :key='index2'>
            <td style="border: none;">{{child.account}}</td>
          </tr>
          </td>
          <td v-else style="border: none;" class='remterstauts'>
            <tr style="border: none;">
              <td style="border: none;">-</td>
            </tr>
          </td>
          <td class='remterstauts' v-if="item.list&&item.list.length>0">
            <tr style="border: none;" v-for="(child, index2) in item.list" :key='index2'>
              <td style="border: none;">{{child.orderCount}}</td>
            </tr>
          </td>
          <td v-else style="border: none;" class='remterstauts'>
            <tr style="border: none;">
              <td style="border: none;">-</td>
            </tr>
          </td>
          <td class='remterstauts' v-if="item.list&&item.list.length>0">
            <tr style="border: none;" v-for="(child, index2) in item.list" :key='index2'>
              <td style="border: none;">{{child.deliveryCount}}</td>
            </tr>
          </td>
          <td v-else style="border: none;" class='remterstauts'>
            <tr style="border: none;">
              <td style="border: none;">-</td>
            </tr>
          </td>
          <td class='remterstauts' v-if="item.list&&item.list.length>0">
            <tr style="border: none;" v-for="(child, index2) in item.list" :key='index2'>
              <td style="border: none;">{{child.preOrderCount}}</td>
            </tr>
          </td>
          <td v-else style="border: none;" class='remterstauts'>
            <tr style="border: none;">
              <td style="border: none;">-</td>
            </tr>
          </td>
          <td class='remterstauts' v-if="item.list&&item.list.length>0">
            <tr style="border: none;" v-for="(child, index2) in item.list" :key='index2'>
              <td style="border: none;">{{child.refundCount}}</td>
            </tr>
          </td>
          <td v-else style="border: none;" class='remterstauts'>
            <tr style="border: none;">
              <td style="border: none;">-</td>
            </tr>
          </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import {
    getServiceExcelData,
  } from "@/api/statistics";
  export default {
    data() {
      return {
        Serviceform: {
          account: '',
          startTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
          endTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
        },
        CustomerServiceList: [], //全国订单数据
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
      }
    },
    created() {
      window.addEventListener("keydown", this.keyupEnter);
    },
    mounted() {
      this.getServiceList();
    },

    methods: {
      // 回车事件
      keyupEnter() {
        if (window.event.keyCode == 13) {
            this.handleFilter(this.Launchdate); // 查询事件
        }
      },
      //如果页面有keep-alive缓存功能，这个函数会触发
      activated() {
        window.addEventListener("keydown", this.keyupEnter);
      },
      deactivated() {
        window.removeEventListener("keydown", this.keyupEnter);
      },

      handleFilter(times) { //查询
        if (times) {
          this.Serviceform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Serviceform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Serviceform.startTime);
        var time2 = Date.parse(this.Serviceform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.getServiceList();
        }


      },
      handleExport(Serviceform, times) { //导出
        let {
          startTime = "", endTime = "", deptIds = '',
        } = this.Serviceform
        // startTime = this.dayjs(startTime)
        //   .format("YYYY-MM-DD")
        //   .toString();
        // endTime = this.dayjs(endTime)
        //   .format("YYYY-MM-DD")
        //   .toString();
        if (times) {
          this.Serviceform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Serviceform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Serviceform.startTime);
        var time2 = Date.parse(this.Serviceform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          // const {
          //   user
          // } = this.$store.state
          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
          window.open(
            `/api/xmbz-statistics/orderStatistics/downLoadServiceExcelData?startTime=${this.Serviceform.startTime}&endTime=${this.Serviceform.endTime}&account=${Serviceform.account}&blade-auth=bearer ${user['content'].accessToken}`

          )
          console.log(
            `/api/xmbz-statistics/orderStatistics/downLoadServiceExcelData?startTime=${this.Serviceform.startTime}&endTime=${this.Serviceform.endTime}&account=${Serviceform.account}&blade-auth=bearer ${user['content'].accessToken}`
          )
        }

      },
      getServiceList() {
        // 订单列表分页
        getServiceExcelData(this.Serviceform).then(response => {
          this.CustomerServiceList = response.data.data;
        });
      },
    }
  }
</script>

<style lang='scss' scoped>
  .CustomerService {
    padding-top: 20px;
    border-top: 1px solid #ccc;

    .filter_containerser {
      display: flex;

      .el-form-item {
        margin-bottom: 22px !important;
      }
    }

    .tablelistService {
      width: 100%;
      margin-top: 20px;

      table {
        border-bottom: 1px solid #EBEEF5;
        border-left: 1px solid #EBEEF5;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        flex: 1;
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        color: #606266;

        thead {
          color: #909399;
          font-weight: 500;
          background-color: #FFF;

          th {
            padding: 12px 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: center;
            border-right: 1px solid #EBEEF5;
            border-top: 1px solid #EBEEF5;
          }
        }

        tr {
          border: none !important;

          td {
            border: none !important;
          }
        }

        tbody {
          td {
            /* padding: 12px 0; */
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: center;
            border: none;
            /* border-right: 1px solid #EBEEF5; */
            height: 30px;


            tr {
              width: 100%;
              display: block;
              text-align: center;

              td {
                /* border-bottom: 1px solid #EBEEF5; */
                text-align: center;
              }
            }

          }

          .remterstauts {
            width: 180px;
            text-align: center;
            /* padding: 12px 0; */
            /* border-top: 1px solid #EBEEF5 !important; */
            border-right: 1px solid #EBEEF5 !important;

            tr {
              width: 180px;
              text-align: center;
              padding: 0 !important;
              margin: 0 !important;
              /*    border-bottom: 1px solid #EBEEF5 !important; */
              box-sizing: border-box;



              td {
                width: 180px;
                text-align: center;
                margin-bottom: 1px !important;
                border-top: 1px solid #EBEEF5 !important;
              }
            }

            &::after {
              border: none;
            }

          }

          .groupName {
            border-top: 1px solid #EBEEF5 !important;
            border-right: 1px solid #EBEEF5 !important;
          }
        }
      }



    }
  }
</style>
